<template>
	<a-modal title="新增周报条目" width="80%" :mask-closable="false" :keyboard="false" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
		@cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="组织机构" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<!--  <a-select style="width: 100%" placeholder="请选择组织机构" v-decorator="['orgs', {rules: [{ required: true, message: '请选择组织机构！' }]}]">
            <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
          </a-select> -->
						<a-tree-select v-decorator="['orgs', {rules: [{ required: true, message: '请选择组织机构！' }]}]"
							style="width: 100%" :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
							:treeData="orgTree" placeholder="请选择机构" tree-default-expand-all
							@change="e => initrOrgName(e)">
							<span slot="title" slot-scope="{ id }">{{ id }}</span>
						</a-tree-select>
					</a-form-item>
					<a-form-item label="任务类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择任务类型" allow-clear
							v-decorator="['type', {rules: [{ required: true, message: '请选择任务类型！' }]}]">
							<a-select-option v-for="(item,index) in xjb_typeData" :key="index" :value="item.code">
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="任务编号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入任务编号"
							v-decorator="['taskcode', {rules: [{ required: true, message: '请输入任务编号！' }]}]" />
					</a-form-item>
					<a-form-item label="任务子类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入任务子类型" v-decorator="['type2']" />
					</a-form-item>
				</a-form-item>

				<a-form-item label="参与人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<!--   <a-checkbox-group placeholder="请选择参与人员"
            v-decorator="['manager',{rules: [{ required: true, message: '请选择参与人员！' }]}]">
            <a-checkbox v-for="(item,index) in xjb_managerData" :key="index" :value="item.code">{{ item.name }}
            </a-checkbox>
          </a-checkbox-group> -->
					<a-select 
						v-decorator="['manager',{rules: [{ required: true, message: '请选择参与人员！'},{ validator : selecthandleValidatormanager }]}]"
						mode="tags"  allow-clear style="width: 100%" placeholder="选择参与人员" :showArrow="true" :maxTagCount="10"
						default-active-first-option @change="selecthandleChangemanager">
						<a-select-option v-for="(item,index) in xjb_managerData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="关联系统" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<!-- <a-checkbox-group placeholder="请选择关联系统"
            v-decorator="['sysids',{rules: [{ required: true, message: '请选择关联系统！' }]}]">
            <a-checkbox v-for="(item,index) in sysidsData" :key="index" :value="item.code">{{ item.name }}</a-checkbox>
          </a-checkbox-group> -->
					<a-select v-decorator="['sysids',{rules: [{ required: true, message: '请选择关联系统！' }]}]" mode="tags"  allow-clear
						style="width: 100%" placeholder="请选择关联系统" :showArrow="true" :maxTagCount="10">
						<a-select-option v-for="(item,index) in xjb_sysidsData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item label="任务内容" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-textarea placeholder="请输入任务内容"
						v-decorator="['title', {rules: [{required: true, message: '请输入任务内容！'}]}]"
						:auto-size="{ minRows: 4, maxRows: 6 }" />
				</a-form-item>
				<!-- <a-form-item label="任务明细" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-textarea placeholder="请输入任务明细" v-decorator="['content']"
						:auto-size="{ minRows: 3, maxRows: 6 }" />
				</a-form-item> -->

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择开始日期"
							v-decorator="['startdate',{rules: [{ required: true, message: '请选择开始日期！' }]}]"
							@change="startdateOnChange" />
					</a-form-item>
					<a-form-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择结束日期"
							v-decorator="['enddate',{rules: [{ required: true, message: '请选择结束日期！' }]}]"
							@change="enddateOnChange" />
					</a-form-item>
				</a-form-item>
				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="目前阶段" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择目前阶段"
							v-decorator="['stage', {rules: [{ required: true, message: '请选择目前阶段！' }]}]">
							<a-select-option v-for="(item,index) in stageData" :key="index" :value="item.code">
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="整体进度" :labelCol="labelCol" :wrapperCol="wrapperCol"
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-select style="width: 100%" placeholder="请选择任务整体进度"
							v-decorator="['process', {rules: [{ required: true, message: '请选择任务整体进度！' }]}]">
							<a-select-option v-for="(item,index) in processData" :key="index" :value="item.code">
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-item>

				</a-form-item>

				<a-form-item label="" style="margin-bottom:0;">
					<a-form-item label="预计上线日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-date-picker style="width: 100%" placeholder="请选择上线日期"
							v-decorator="['product',{rules: [{ required: true, message: '请选择上线日期！' }]}]"
							@change="productOnChange" />
					</a-form-item>
					<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback
						:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
						<a-input placeholder="请输入备注" v-decorator="['note']" />
					</a-form-item>
				</a-form-item>

				<!-- 	<a-form-item label="关联任务" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input placeholder="请输入关联任务" v-decorator="['ref']" />
				</a-form-item> -->
				<!-- 	<a-form-item label="有效性" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select style="width: 100%" placeholder="请选择有效性"
						v-decorator="['vflag', {rules: [{ required: true, message: '请选择有效性！' }]}]">
						<a-select-option default-value='0' v-for="(item,index) in vflagData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item> -->
				<!-- <a-form-item label="其他信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input placeholder="请输入其他信息" v-decorator="['others']" />
				</a-form-item> -->
				<!-- <a-form-item label="是否关闭" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select style="width: 100%" placeholder="请选择是否关闭"
						v-decorator="['complate', {rules: [{ required: true, message: '请选择是否关闭！' }]}]">
						<a-select-option v-for="(item,index) in complateData" :key="index" :value="item.code">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item> -->
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
	import moment from 'moment'
	// import {
	// 	getUserPage
	// } from '@/api/modular/system/userManage'
	import {
		xjbSysdetailList
	} from '@/api/modular/main/xjbsysdetail/xjbSysdetailManage'
	import {
		xjbWeeklyAdd
	} from '@/api/modular/main/xjbweekly/xjbWeeklyManage'
	import {
		sysDictTypeDropDown
	} from '@/api/modular/system/dictManage'
	import {
		getOrgTree,
		getOrgList
	} from '@/api/modular/system/orgManage'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				mmee: "",
				stageData: [],
				processData: [],
				complateData: [],
				xjb_sysidsData: [],
				xjb_managerData: [],
				xjb_typeData: [],
				vflagData: [],
				complateData: [],
				orgTree: [],
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					}
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 15
					}
				},
				startdateDateString: '',
				enddateDateString: '',
				productDateString: '',
				visible: false,
				confirmLoading: false,
				form: this.$form.createForm(this)
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
		},
		methods: {
			// 初始化方法
			add(record) {
				var that=this
				this.visible = true
				this.$nextTick(() => {this.getxjb_managerData()});
				this.$nextTick(() => {this.getxjbSysdetailList()});
				this.$nextTick(() => {this.getOrgDate()});
				this.$nextTick(() => {this.sysDictTypeDropDown()});
			 
				this.$nextTick(() => {
					this.selectedByDefault () 
				});
			},
		  /**
		   * 默认选中项
		   */
		  selectedByDefault () { 
			const {userInfo,stageData,processData,xjb_typeData} = this
			this.form.getFieldDecorator('orgs', { initialValue:  userInfo.loginEmpInfo.orgId }) 
			this.form.getFieldDecorator('manager', { initialValue:  userInfo.account }) 
			this.form.getFieldDecorator('startdate', { initialValue: moment() })	
			this.form.getFieldDecorator('enddate', { initialValue: moment() })
			this.form.getFieldDecorator('product', { initialValue: moment().add(7,'days') })
			this.form.getFieldDecorator('stage', { initialValue:stageData.length>0?stageData[0].code:''}) 
			this.form.getFieldDecorator('process', { initialValue:processData.length>0?processData[0].code:''}) 
			this.form.getFieldDecorator('type', { initialValue:xjb_typeData.length>0?xjb_typeData[0].code:''}) 
		  },
		  

			getxjb_managerData() {
				// var that = this;
				this.xjb_managerData = this.$options.filters['dictData']('xjb_sys_user')
				// getUserPage().then((res) => {
				// 	console.log("getUserPage()", res)
				// 	that.xjb_managerData = []
				// 	res.data.rows.forEach((n) => {
				// 		that.xjb_managerData.push({
				// 			value: n.account,
				// 			label: n.name + "(" + n.account + ")"
				// 		})
				// 	})
				// })
			},

			getxjbSysdetailList() {
				this.xjb_sysidsData = this.$options.filters['dictData']('xjb_sysdetail')
				// var that = this;
				// xjbSysdetailList().then((res) => {
				// 	that.xjb_sysidsData = [];
				// 	res.data.forEach((n) => {
				// 		that.xjb_sysidsData.push({
				// 			value: n.sysid,
				// 			label: n.sysid + "-" + n.sysname
				// 		})
				// 	})
				// })
			},
			/**
			 * 选择树机构，初始化机构名称于表单中
			 */
			initrOrgName(value) {
				this.form.getFieldDecorator('orgName', {
					initialValue: this.orgList.find(item => value === item.id).name
				})
			},
			/**
			 * 获取字典数据
			 */
			sysDictTypeDropDown() {
				this.formLoading = true

				//目前阶段
				this.stageData = this.$options.filters['dictData']('xjb_stageData')
				// sysDictTypeDropDown({
				// 	code: 'xjb_stageData'
				// }).then((res) => {
				// 	this.stageData = res.data
				console.log(this.stageData)
				// })
				//完成率
				this.processData = this.$options.filters['dictData']('xjb_achieving_rate')
				// sysDictTypeDropDown({
				// 	code: 'xjb_achieving_rate'
				// }).then((res) => {
				// 	this.processData = res.data
				// 	//console.log(this.processData)
				// })

				//任务类型
				this.xjb_typeData = this.$options.filters['dictData']('xjb_type_type')
				// sysDictTypeDropDown({
				// 	code: 'xjb_type_type'
				// }).then((res) => {
				// 	this.xjb_typeData = res.data
				// 	//console.log(this.xjb_typeData)
				// })

				//是否关闭
				this.complateData = this.$options.filters['dictData']('yes_or_no')
				// sysDictTypeDropDown({
				// 	code: 'yes_or_no'
				// }).then((res) => {
				// 	this.complateData = res.data
				// 	//console.log(this.complateData)
				// })

				//有效性
				this.vflagData = this.$options.filters['dictData']('yes_or_no')
				// sysDictTypeDropDown({
				// 	code: 'yes_or_no'
				// }).then((res) => {
				// 	this.vflagData = res.data
				// 	//console.log(this.vflagData)
				// })

				// 组织机构
				// sysDictTypeDropDown({
				// 	code: 'menu_type'
				// }).then((res) => {
				// 	this.orgsData = res.data
				// })

				// 权重
				// sysDictTypeDropDown({
				// 	code: 'menu_weight'
				// }).then((res) => {
				// 	this.weightData = res.data
				// })

				// 内外链
				// sysDictTypeDropDown({
				// 	code: 'open_type'
				// }).then((res) => {
				// 	this.openTypeData = res.data
				// 	this.formLoading = false
				// })
			},

			getOrgDate() {
				getOrgTree().then((res) => {
					this.orgTree = res.data
					//  this.orgData = res.data
				})
				getOrgList().then((res) => {
					this.orgList = res.data
					// this.orgData = res.data
				})
			},
			selecthandleChangemanager(option) {
				// console.log("selecthandleChangemanager", option);
			},
			selecthandleValidatormanager(rule, value, callback) {
				if (value.length > 30) {
					callback('最多选择30项')
				} else if (value.length<1){
					callback('请选择')
				} else {
					callback()
				}
			},
			/**
			 * 提交表单
			 */
			handleSubmit() {
				const {
					form: {
						validateFields
					}
				} = this
				this.confirmLoading = true
				validateFields((errors, values) => {
					//console.log("errors", errors, values)
					if (!errors) {
						for (const key in values) {
							if (typeof(values[key]) === 'object' && values[key] != null) {
								values[key] = JSON.stringify(values[key])
							}
						}

						values.startdate = this.startdateDateString || null
						values.enddate = this.enddateDateString || null
						values.product = this.productDateString || null
						values.product = this.productDateString || null
						values.vflag = 'Y' //：有效性不能为空，请检查vflag参数
						values.complate = 'N' //：是否关闭不能为空，请检查complate参数
						xjbWeeklyAdd(values).then((res) => {
							if (res.success) {
								this.$message.success('新增成功')
								this.confirmLoading = false
								this.$emit('ok', values)
								this.handleCancel()
							} else {
								this.$message.error('新增失败') // + res.message
							}
						}).finally((res) => {
							this.confirmLoading = false
						})
					} else {
						this.confirmLoading = false
					}
				})
			},
			startdateOnChange(date, dateString) {
				this.startdateDateString = dateString
			},
			enddateOnChange(date, dateString) {
				this.enddateDateString = dateString
			},
			productOnChange(date, dateString) {
				this.productDateString = dateString
			},
			handleCancel() {
				this.startdateDateString = ''
				this.form.getFieldDecorator('startdate', {
					initialValue: null
				})
				this.enddateDateString = ''
				this.form.getFieldDecorator('enddate', {
					initialValue: null
				})
				this.productDateString = ''
				this.form.getFieldDecorator('product', {
					initialValue: null
				})
				this.form.resetFields()
				this.visible = false
			}
		}
	}
</script>
